import { NMTopoBaseCommand } from '@app-cad/environments/nextmesh/types/command';
import { useState } from 'react';
import { GenerateMode, TopoDialogProps } from '../type';
import { CommandDialog, pickedLineData } from '@amcax/base';

import { CommandFormWrapper } from '@app-cad/common/components/command-form';
import { PickInputForFocus } from '@app-cad/common/components/command-form/auto-focus/pick-input';
import { CommandFormFooter } from '@app-cad/common/components/command-form/footer';
import i18n from '@app-cad/common/utils/i18next';

import { Popover } from 'antd';
import { DirectionGroup } from '../cmd-direction';
import { useCommand } from '@app-cad/common/hooks/useCommand';
import { documentV2 } from '@app-nextmesh/domain';
import { PickInputValueType } from '@app-base/common/components/pick-input/types';

function TopoExtrudeDialog({ title, onClose }: TopoDialogProps) {
  // const picker = PickerMgr.getPicker<Picker3D>('3d');
  const [sourceData, setSourceData] = useState<pickedLineData[]>([]);
  const [directionText, setDirectionText] = useState('选择拉伸方向');
  const [directionVisible, setDirectionVisible] = useState(false);
  const [directionData, setDirectionData] = useState([]);
  const [length, setLength] = useState(null);
  useCommand('cmdExtrude', {
    onClose,
  });

  const onSourcePickData = (sourceArr) => {
    setSourceData(sourceArr);
  };
  const isValid = () => {
    return sourceData.length > 0 && directionText !== '选择拉伸方向';
  };
  const handleSubmit = async () => {
    if (!isValid()) {
      return;
    }
    const params = {
      mode: GenerateMode.Extrude,
      source: [sourceData[0].edgeId],
      relyon: [...directionData],
    };
    await documentV2.generateEntity(params);
    setDirectionText('选择拉伸方向');
    onClose();
  };

  const onDirectionData = (data) => {
    setDirectionVisible(data.directionVisible);
    setDirectionText(data.directionText);
    setDirectionData(data.directionVec);
    setLength(data.length);
  };
  return (
    <CommandDialog
      title={title}
      placement='topLeft'
      onClose={onClose}>
      <CommandFormWrapper>
        <PickInputForFocus
          autoFocus
          controlled
          allowPickType={[PickInputValueType.Line, PickInputValueType.Curve]}
          onPick={onSourcePickData}
          value={sourceData}
          placeholder='请选择需要拉伸的边'
        />
        <Popover
          getPopupContainer={() => document.querySelector('#app-cad_root')}
          trigger='click'
          title='拉伸方向'
          open={directionVisible}
          content={<DirectionGroup onDirectionSubmit={onDirectionData} />}>
          <div
            onClick={() => setDirectionVisible(true)}
            className='h-12 border border-gray-300 cursor-pointer flex items-center justify-center flex-col'>
            {directionText}
            {length && (
              <>
                <br />
                Len:{length}
              </>
            )}
          </div>
        </Popover>
        <CommandFormFooter
          onClose={onClose}
          onSubmit={handleSubmit}
          submitText='完成'
          isSubmitDisabled={!isValid()}
        />
      </CommandFormWrapper>
    </CommandDialog>
  );
}
export const cmdTopoExtrude: NMTopoBaseCommand = {
  id: 'cmdTopoExtrude',
  icon: 'commands/curved/point',
  label: 'command.topo.extrude',
  create: (label: string, onClose: () => void, props) => (
    <TopoExtrudeDialog
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
      placement='topLeft'
    />
  ),
};
